<template>
  <div>
    <mf @query="strat" :datas="datas">
      <template slot="groupMember" slot-scope="scope">
        {{scope.value.groupMember|FgroupMember}}
      </template>
      <template slot="lastBtn">
        <el-button size="mini" type="primary" @click="edit()">新增分组</el-button>
      </template>
      <template slot="oper" slot-scope="scope">
        <el-button size="mini" type="text" @click="edit(scope.value)">编辑</el-button>
        <el-button size="mini" type="text" @click="remove(scope.value)">删除</el-button>
      </template>
    </mf>

    <el-dialog
    title="创建新分组"
    :visible.sync="dialogVisible"
    width="50%"
    
    >
    <!-- ---------------------------- -->
    <el-card class="box-card">
      <div style="position: absolute;top: 60px;right: 50px;">
        设为默认
        <el-switch 
            v-model="value2"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="新组名">
            <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
    </el-form>

    <!-- -----添加成员----------- -->
    <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
        </el-tag>
        <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">添加成员</el-button>
    <!-- -----结束添加成员----------- -->
    </el-card>

    <!-- <el-card class="box-card">
    <div>aaaaaaaaa</div>
    </el-card> -->
       <!-- ---------------------------- -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroup()">确 定</el-button>
    </span>
    </el-dialog>

    <!-- <button @click="open3"></button> -->
  </div>    
</template>

<script>
import requests from "@/https.js";
import { request } from 'http';
import { open } from 'fs';
export default {
  components: {
  },
  data() {
    return {
      value1: true,
      value2: true,

      datas: {
        params: {
          page: 1,
          size: 20
        },
        table: {
          //   selection: true,
          loading: false
        },
        resData: {
          rows: [],
          size: 20,
          page: 1,
          recordsTotal: 0
        },
        filterList: [
          {
            type: "input",
            prop: "groupName",
            conditionshow: true,
            filedShow: true,
            label: "组名",
            placeholder: "组名"
          },
          {
            type: "input",
            prop:'groupMember',
            conditionshow: true,
            filedShow: true,
            label: "组成员",
            placeholder: "组成员",
            slot:true
          },
          // {
          //   type: "input",
          //   prop: "phone",
          //   conditionshow: false,
          //   filedShow: true,
          //   label: "是否为默认组",
          //   placeholder: "是否为默认组"
          // },
          {
            type: "input",
            prop: "oper",
            conditionshow: false,
            filedShow: true,
            isSearchHide: true,
            slot: true,
            label: "操作",
            placeholder: "操作"
          }
        ],


      },
        //弹出提示框
         dialogVisible: false,
         labelPosition: 'top',
        formLabelAlign: {
          name: '',
          id:''
        },

        //添加成员
        dynamicTags: [],
        dynamicTags1:[],
        inputVisible: false,
        inputValue: '',

        message: '',
        type: '',

        key_on:''
    };
  },

  mounted() {
    
  },

  methods: {
      strat(){
        requests.get("/api/charge/group").then(res => {
        this.datas.resData.rows = res.data.data;
      });
      },

      edit(it){
        this.dialogVisible = true
        this.dynamicTags.length=0;
        this.dynamicTags1.length=0;
          this.formLabelAlign.name=''
          this.formLabelAlign.id=''
        if(it){
          var i=0
          console.log('edit', it)
          for(let i of it.groupMember){
            this.dynamicTags.push(i.name)
            this.dynamicTags1.push({name:i.name})
          }
          this.formLabelAlign.name=it.groupName 
          this.formLabelAlign.id=it.groupId
          this.key_on=1      
        }
        else{
          this.key_on=0
          // this.dynamicTags.length=0;
          // this.formLabelAlign.name=''
        }

      },

      //添加或更新组
      addGroup(){    
        console.log('aaaaaaa',this.key_on)
        console.log('aaaaaaa',this.formLabelAlign.name)
        console.log('aaaaaaa',this.dynamicTags1)
        var key_on=this.key_on
        if(key_on==1){
          requests.post("/api/charge", { key: "group", data: {GroupId:this.formLabelAlign.id, GroupName: this.formLabelAlign.name,GroupMember:this.dynamicTags1} }).then(res => {
           this.strat()
        });
        }else{
          requests.post("/api/charge", { key: "group", data: { GroupName: this.formLabelAlign.name,GroupMember:this.dynamicTags1} }).then(res => {
           this.strat()
        });
        }
        this.dialogVisible = false
      },

      remove(item){
        console.log('删除', item.groupId)
        requests.post("/api/charge", { key: "removegroup", data: { GroupId: item.groupId} }).then(res => {
            console.log('删除信息', res)
            this.$message({
            message: res.data.msg,
            type: 'success'
           });
           this.strat()
        });
      },

    //    handleClose(done) {
    //     this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    //   }
        //删除成员
        handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        this.dynamicTags1.splice(this.dynamicTags1.indexOf(tag), 1);
        },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
        // console.log('ppp',this.inputValue)
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        
        if (inputValue) {
          requests.post("/api/value", { key: "user", data: { value: inputValue} }).then(res => {
          if(res.data.code==0){
            this.dynamicTags1.push({name:inputValue});
            this.dynamicTags.push(inputValue);
          }
          else{
            this.$message({
            message: res.data.msg,
            type: 'warning'
        });
          }
        });
          
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

  },
  filters:{
    FgroupMember:item=>{
      let newitem =''
      for(let i of item){
        newitem += i.name+'，'
      }
      newitem = newitem.slice(0,-1)
      return newitem
    }
  }

}
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
    margin-top: 10px;
  }
  /* //添加成员 */
   .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
